<template>
      <div class="content-area-default-content mr10 w100">
        <ul>
          <li v-for="(item,index) in editList.videoid" :key="index" style="gap:5px;" class="flex mb10">
            <input v-model="item.vid" title="视频ID" @blur="handleParseVideo(item)" class="flex1" placeholder="视频VID"/>
            <input v-model="item.title" title="视频标题" class="flex1" placeholder="视频标题"/>
            <input v-model="item.duration" title="视频时长" class="flex1" placeholder="视频时长"/>
            <div>
                <button @click.prevent="handlePrev(index)">上移</button>
                <button @click.prevent="handleNext(index)">下移</button>
                <button @click.prevent="handleDel(index)">删除</button>
            </div>
          </li>
        </ul>
        <div class="flex" style="gap: 10px;">
          <button class=" flex1 text-center mainbg1" @click.prevent="handleAddVideo"><i class="iconfont icon-tianjia pr tp1 mr5"></i>添加视频</button>
          <button class=" flex1 text-center mainbg1" v-if="editList.chapterId && !editList.lessonId" @click.prevent="handleEditorChapterVideo"><i class="iconfont icon-tianjia pr tp1 mr5"></i>保存章视频</button>
          <button class=" flex1 text-center mainbg1" v-if="editList.chapterId && editList.lessonId" @click.prevent="handleEditorLessonVideo"><i class="iconfont icon-tianjia pr tp1 mr5"></i>保存节视频</button>
        </div>
      </div>
</template>
<script setup>
  import {updateChapterVideo} from '@/api/note/chapter.js'
  import {parseVideoAliplayer, updateLessonVideo} from '@/api/note/lesson.js'
  import KVA from "@/utils/kva";
  const props = defineProps({
    editObj:{
      type: Object,
      default: {}
    }
  })
  const editList = ref(props.editObj)
  const handleAddVideo = ()=>{
    editList.value.videoid.push({title:"",vid:"",url:"",duration:"00:00"})
  }

  const handleNext = (index)=>{
    var arr = editList.value.videoid;
    if (index === arr.length - 1) return arr; // 已在底部，不能再下移
    [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]]; // 交换位置
  }
  const handlePrev = (index)=>{
    var arr = editList.value.videoid;
    if (index === 0) return; // 已在顶部，不能再上移
    [arr[index - 1], arr[index]] = [arr[index], arr[index - 1]];
  }

  const handleDel = (index)=>{
    editList.value.videoid.splice(index,1)
  }
  // 编辑章
  const handleEditorChapterVideo = async ()=>{
    try {
      await updateChapterVideo(editList.value.chapterId,JSON.stringify(editList.value.videoid))
      KVA.success('修改成功!')
    }catch (e){
      KVA.error(e.message)
    }
  }

  const handleEditorLessonVideo = async ()=>{
    try {
      await updateLessonVideo(editList.value.lessonId,JSON.stringify(editList.value.videoid))
      KVA.success('修改成功!')
    }catch (e){
      KVA.error(e.message)
    }
  }

  function convertSecondsToHMS(seconds) {
    var hours = Math.floor(seconds / 3600);
    var minutes = Math.floor((seconds % 3600) / 60);
    var remainingSeconds = Math.floor(seconds % 60);

    return hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0') + ":" + remainingSeconds.toString().padStart(2, '0');
  }
  // 解析视频
  const handleParseVideo = async (item)=>{
    const resp = await parseVideoAliplayer(item.vid)
    item.duration = convertSecondsToHMS(resp.data.videoBase.duration);
    item.title = resp.data.videoBase.title;
  }


</script>
<style scoped>
.content-area-default-content input{border:1px solid #eee;font-size:12px;}
.content-area-default-content input,.content-area-default-content button{padding:6px;border-radius: 4px;color:#333;}
</style>